<template>
	<div class="app-container">
		<!-- <div class="flex">
			<p>成员惠单:</p>
			<el-select style="margin-left: 10px;" v-model="value" placeholder="请选择">
				<el-option v-for="item in options.baoliCustOptions" :key="item.key" :label="item.label" :value="item.key">
				</el-option>
			</el-select>
		</div> -->
		<el-divider></el-divider>
		<!-- <div class="moneyBox">
			<div class="moneyChildBox">
				<div class="textAlLine eduTitle">预授信额度</div>
				<div class="titleNumber textAlLine"> {{ creditInfor.credit }}<span style="color: #818181;margin-left: 10px;">元</span>
				</div>
			</div>
			<div class="moneyChildBox">
				<div class="textAlLine eduTitle">可用额度</div>
				<div class="titleNumber textAlLine redColor"> {{ creditInfor.creditLeft }}<span
						style="color: #818181;margin-left: 10px;">元</span> </div>
			</div>
			<div class="moneyChildBox">
				<div class="textAlLine eduTitle">已用额度</div>
				<div class="titleNumber textAlLine">46,568,54<span style="color: #818181;margin-left: 10px;">元</span>
				</div>
			</div>
			<div class="moneyChildBox">
				<div class="textAlLine eduTitle">冻结额度</div>
				<div class="titleNumber textAlLine"> {{ creditInfor.frezeCredit }}<span style="color: #818181;margin-left: 10px;">元</span>
				</div>
			</div>
		</div> -->
		<el-divider></el-divider>
  <div class="filter_container">
      <el-tabs v-model="queryParams.status" type="card" @tab-click="handleQuery">
        <el-tab-pane name="APPLYPAYMENT">
          <span slot="label"><i class="el-icon-s-order" /> 融资待审核</span>
        </el-tab-pane>
        <el-tab-pane name="PAYMENTCHECK">
          <span slot="label"><i class="el-icon-s-order" /> 融资待复核</span>
        </el-tab-pane>
        <el-tab-pane name="PAYMENTWAIT">
          <span slot="label"><i class="el-icon-s-order" /> 融资待放款</span>
        </el-tab-pane>
        <el-tab-pane name="CONFIRMPAY">
          <span slot="label"><i class="el-icon-bank-card" /> 已兑付</span>
        </el-tab-pane>

        <el-tab-pane name="REJECTPAY">
          <span slot="label"><i class="el-icon-bank-card" /> 融资不通过</span>
        </el-tab-pane>



      </el-tabs>
     </div>
 <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
				<el-form-item label="自" prop="orderTimeFr">
				  <el-date-picker v-model="queryParams.orderTimeFr" type="date" value-format="yyyy-MM-dd" size="mini" style="width: 200px" placeholder="选择时间始" clearable />
				</el-form-item>
				<el-form-item label="至" prop="orderTimeTo">
				  <el-date-picker v-model="queryParams.orderTimeTo" type="date" value-format="yyyy-MM-dd" size="mini" style="width: 200px" placeholder="选择时间至" clearable />
				</el-form-item>



					<el-form-item label="状态">
						<el-select v-model="queryParams.status" clearable placeholder="请选择">
							<el-option v-for="item in  options.statusOptions" :key="item.key" :label="item.label"
								:value="item.key">
							</el-option>
						</el-select>
					</el-form-item>

				<el-form-item>
				    <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
             <el-button type="cyan" icon="el-icon-upload2" size="mini" @click="handleExport">导出</el-button>
             <el-button v-if="queryParams.status === `CREATED`" type="cyan" icon="el-icon-upload2" size="mini" @click="handleProve">复核</el-button>
         <el-button v-if="queryParams.status === `APPLYPAYMENT`" type="cyan" icon="el-icon-search" size="mini" @click="handleBaoliFiniaceProve">融资审核</el-button>
           <el-button v-if="queryParams.status === `SENT`" type="cyan" icon="el-icon-search" size="mini" @click="handleRece">签收</el-button>
				  <el-button  v-if="queryParams.status === `newRece`" v-hasPermission="['order:salesOrder:insert']" type="info" icon="el-icon-upload2" size="mini" @click="generateSettlement">自动生成结算单</el-button>
				  <el-button v-if="queryParams.status === `newRece`" v-hasPermission="['order:salesOrder:insert']" type="info" icon="el-icon-upload2" size="mini" @click="batchGenerateSettlement">选择生成结算单</el-button>
				  <el-button  v-if="queryParams.status === `acc_failed`" type="info" icon="el-icon-upload2" size="mini" @click="reGenerateSettlement">自动再次结算</el-button>
				  <el-button v-if="queryParams.status === `acc_failed`" v-hasPermission="['order:salesOrder:insert']" type="info" icon="el-icon-upload2" size="mini" @click="batchReGenerateSettlement">选择再次结算</el-button>

				  <el-button  v-if="queryParams.status === `acc_failed`" v-loading="exportLoading"  type="info" icon="el-icon-download" size="mini" @click="handleExport">导出失败结算</el-button>

				  </el-form-item>
				</el-form>

 <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange" @sort-change="handleSortChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column fixed prop="creditBillNo" label="单号" width="150">
      </el-table-column>
   <el-table-column label="状态" align="center" width="90">
       <template slot-scope="scope">
          <span>{{ scope.row.status | billStatusFilter }}</span>
        </template>
      </el-table-column>
    <el-table-column  v-if="queryParams.status === `acc_failed`" label="结算处理信息" width="475" show-overflow-tooltip align="center" prop="genAccFailedReason" />

     <el-table-column label="开单金额" align="center" sortable width="150" prop="amount" />
      <el-table-column label="买家公司" align="center" sortable width="170" prop="buyerName" />
      <el-table-column label="卖家公司" align="center" show-overflow-tooltip prop="salerName" sortable width="130"/>
     <!-- <el-table-column label="商城SPU" align="center" show-overflow-tooltip sortable width="130">
      <template slot-scope="scope">
        <el-button type="text" @click="handlePriceView(scope.row)">{{ scope.row.custSpuId }}</el-button>
      </template>
       </el-table-column> -->
       <el-table-column label="收单企业" align="center" prop="receiverName" sortable  width="150"/>

      <!-- <el-table-column label="活动编号" align="center" show-overflow-tooltip width="90">
      <template slot-scope="scope">
        <el-button type="text" @click="handleActivityPriceView(scope.row)">{{ scope.row.discountActivityCode }}</el-button>
      </template>
      </el-table-column>
 -->
      <el-table-column label="期限（天）" align="right"  prop="validateLength" />

       <el-table-column label="兑付方式" align="center" prop="paymentType" />
  <el-table-column label="开单日" align="center" prop="openDate" width="160">
         <template slot-scope="scope">
          <span>{{ parseTime(scope.row.openDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="到期日" align="center" prop="validatedTo" width="160">
         <template slot-scope="scope">
          <span>{{ parseTime(scope.row.validatedTo) }}</span>
        </template>
      </el-table-column>

   <el-table-column label="操作" align="center" fixed="right" width="120" class-name="small-padding fixed-width">
       <template slot-scope="scope">
         <el-button v-hasPermission="['baoli:finCreditBill:search']" size="mini" type="text" @click="handleEdit(scope.row)">查看</el-button>

        <!--   <el-button type="text" v-hasPermission="['baoli:finCreditBill:prove']" v-if="handleProveBtnShow(scope.row.status)" icon="el-icon-edit" @click="handleProve(scope.row)">复核</el-button>
       -->    <el-button type="text" v-hasPermission="['baoli:finCreditBill:paymentConfirm']" v-if="handleBaoliProveBtnShow(scope.row.status)" icon="el-icon-edit" @click="handleBaoliFiniaceProve(scope.row)">融资审核</el-button>
          <!--   <el-dropdown type="text" split-button><el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-hasPermission="['order:salesOrder:update']" size="mini" type="primary" plain :disabled="scope.row.orderStatus !== 'created'" @click.native="handleEdit(scope.row)">修改</el-dropdown-item>
              <el-dropdown-item v-if="handleApAmtBtnShow(scope.row.status)" icon="el-icon-receiving" divided @click.native="handleSettle(scope.row)">再次结算</el-dropdown-item>
        <el-dropdown-item v-if="handleApAmtBtnShow(scope.row.orderStatus)" icon="el-icon-receiving" divided @click.native="openApAmtDialog(scope.row)">生成结算</el-dropdown-item>
            <el-dropdown-item v-if="handleReimportBtnShow(scope.row.errorFlag)" icon="el-icon-receiving" divided @click.native="handleImport(scope.row)">修复数据</el-dropdown-item>
           <el-dropdown-item v-hasPermission="['order:salesOrder:update']" size="mini" type="primary" plain :disabled="scope.row.orderStatus !== 'created'" @click.native="handleEdit(scope.row)">下载提案/报价</el-dropdown-item>
             <el-dropdown-item v-if="handleReturnBtnShow(scope.row.status)" icon="el-icon-receiving" divided @click.native="handleReturn(scope.row)">退单处理</el-dropdown-item>

            <el-dropdown-item v-hasPermission="['order:salesOrder:delete']" size="mini" type="primary" plain :disabled="scope.row.orderStatus !== 'created'" @click.native="handleRemove(scope.row)">删除</el-dropdown-item>
            </el-dropdown-menu> -->
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>


    <div class="dialog_container">
      <!--复核-->
      <el-dialog
        :title="proveDialog.title"
        :close-on-click-modal="false"
        :before-close="closeProveDialog"
        :visible.sync="proveDialog.visible"
        width="35%"
      >
        <el-form :model="proveDialogData" label-position="right" label-width="120px" class="dialog_form">
          <el-form-item label="审核结果：">
            <el-select v-model="proveDialogData.proveStatus" placeholder="请选择" clearable size="mini">
              <el-option v-for="option in  options.proveOptions" :key="option.key" :label="option.label" :value="option.key" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核备注：">
            <el-input v-model="proveDialogData.remark" />

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeProveDialog()">取消</el-button>
          <el-button type="primary" @click="confirmProveDialog()">保存</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="dialog_container">
      <!--保理公司审核-->
      <el-dialog
        :title="baoliProveDialog.title"
        :close-on-click-modal="false"
        :before-close="closeBaoliProveDialog"
        :visible.sync="baoliProveDialog.visible"
        width="35%"
      >
        <el-form :model="baoliProveDialogData" label-position="right" label-width="120px" class="dialog_form">
          <el-form-item label="审核结果：">
            <el-select v-model="baoliProveDialogData.proveStatus" placeholder="请选择" clearable size="mini">
              <el-option v-for="option in  options.proveOptions" :key="option.key" :label="option.label" :value="option.key" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核备注：">
            <el-input v-model="baoliProveDialogData.remark" />

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeBaoliProveDialog()">取消</el-button>
          <el-button type="primary" @click="confirmBaoliProveDialog()">保存</el-button>
        </div>
      </el-dialog>
    </div>
	</div>
</template>

<script>
  import appConstant from '@/constant/AppConstant'
  import AuthUtils from '@/utils/AuthUtils'
  import FinCreditBillApi from '@/api/baoli/FinCreditBillApi'
  import CustomerApi from '@/api/basic/CustomerApi';
	export default {
		name: 'OmsSalesOrderList',
    filters: {
      billStatusFilter(item) {
        const values = appConstant.proveStatusList.filter(value => value.key === item)
        if (values && values.length > 0) {
          return values[0].label
        } else {
          return ''
        }
      }
     },
		data() {
			return {
				activeName: 'first',
        options: {
          proveOptions: appConstant.proveList,
          baoliCustOptions: appConstant.baoliCustList,
          statusOptions: appConstant.proveStatusList
        },

				value: '1',
				formInline: {
					paixu: '',
					date1: '',
					date2: ''
				},
				value2: [],

        queryParams: {
          status: '',
          orderTimeFr: null,
          orderTimeTo: null,
          sortProperty: null,
          sortDirection: null
        },
        page: {
          current: 1,
          pageSize: 10,
          total: 0,
          records: [],
          paidRecords: []
        },
        paidPage: {
          current: 1,
          pageSize: 10,
          total: 0,
          records: []
        },
        cancelPage: {
          current: 1,
          pageSize: 10,
          total: 0,
          records: []
        },
        restPage: {
          current: 1,
          pageSize: 10,
          total: 0,
          records: []
        },
        baoliProveDialog: {
          title: '审核',
          visible: false
        },
        baoliProveDialogData: {
         proveStatus: null,
          remark: null,
         ids: null
        },
        proveDialog: {
          title: '融资审核',
          visible: false
        },
        proveDialogData: {
         proveStatus: null,
          remark: null,
         ids: null
        },
        creditInfor: {
        	credit: '',
        	creditLeft: '',
        	frezeCredit: ''
        },
        loading: true,
        searchVisible: true,
        multipleSelection: [],
        isSingle: true,
        isMultiple: true
        //appLoading: false
	  	}
		},
		created() {
        this.handleInitQuery()
        this.loadOptions()
		},
		methods: {
			handleClick(tab, event) {
      //  if(tab.name==='second'){
        /*  FinCreditBillApi.page(this.queryParams, this.paidPage).then(response => {
            this.paidPage.records = response.data.records
            this.paidPage.total = response.data.total
            this.loading = false
          }, () => {
            this.loading = false
          }) */
     //   }
				console.log(tab, event);
			},
      handleBaoliFiniaceProve(row) {
         const ids = row.id || this.multipleSelection.map(item => item.id)
           this.proveDialog.visible = true
           this.proveDialogData.ids = ids
      },
      handlePlatformProve(row) {
         const ids = row.id || this.multipleSelection.map(item => item.id)
           this.baoliProveDialog.visible = true
           this.baoliProveDialogData.ids = ids
      },

      closeProveDialog() {
        this.proveDialog = {
          title: '融资审核',
          visible: false
        }
        this.proveDialogData = {
          proveStatus: null
        }
         this.handleQuery()
      },
      closeBaoliProveDialog() {
        this.baoliProveDialog = {
          title: '审核',
          visible: false
        }
        this.baoliProveDialogData = {
          proveStatus: null
        }
         this.handleQuery()
      },
      confirmProveDialog() {
          const params = {
            status: this.proveDialogData.proveStatus,
            remark: this.proveDialogData.remark,
            ids: this.proveDialogData.ids
         }
          FinCreditBillApi.rongziProve(params).then(() => {
            this.$message.success('融资成功!')
            this.closeProveDialog()
          })
          this.handleQuery()
      },
      confirmBaoliProveDialog() {
          const params = {
            status: this.baoliProveDialogData.proveStatus,
            remark: this.baoliProveDialogData.remark,
            ids: this.baoliProveDialogData.ids
         }
          FinCreditBillApi.baoliProve(params).then(() => {
            this.$message.success('保理审核成功!')
            this.closeBaoliProveDialog()
          })
          this.handleQuery()
      },
      handleInitQuery() {
        this.loading = true
       this.queryParams.status = 'APPLYPAYMENT'
        FinCreditBillApi.baolipage(this.queryParams, this.page).then(response => {
          this.page.records = response.data
          this.page.total = response.data.total
          this.loading = false
        }, () => {
          this.loading = false
        })

      },
      handleQuery() {
        this.loading = true
       // this.queryParams.status = 'N'
        FinCreditBillApi.baolipage(this.queryParams, this.page).then(response => {
          this.page.records = response.data
          this.page.total = response.data.total
          this.loading = false
        }, () => {
          this.loading = false
        })

      },
     handleProveBtnShow: function(status) {
        const validStatusList = ['CREATED','REJECT']
        const index = validStatusList.indexOf(status)
        if (index === -1) {
          return false
        } else {
          return true
        }
      },
      handleBaoliProveBtnShow: function(status) {
        const validStatusList = ['APPLYPAYMENT','REJECTPAY']
        const index = validStatusList.indexOf(status)
        if (index === -1) {
          return false
        } else {
          return true
        }
      },
      handlePaidQuery() {
        this.loading = true
       // this.queryParams.errorFlag = 'N'
        FinCreditBillApi.page(this.queryParams, this.paidPage).then(response => {
          this.paidPage.records = response.data.records
          this.paidPage.total = response.data.total
          this.loading = false
        }, () => {
          this.loading = false
        })
      },
      handleCancelQuery() {
        this.loading = true
       // this.queryParams.errorFlag = 'N'
        FinCreditBillApi.page(this.queryParams, this.cancelPage).then(response => {
          this.cancelPage.records = response.data.records
          this.cancelPage.total = response.data.total
          this.loading = false
        }, () => {
          this.loading = false
        })
      },
      handleRestQuery() {
        this.loading = true
       // this.queryParams.errorFlag = 'N'
        FinCreditBillApi.page(this.queryParams, this.restPage).then(response => {
          this.restPage.records = response.data.records
          this.restPage.total = response.data.total
          this.loading = false
        }, () => {
          this.loading = false
        })
      },
      loadOptions() {
      	let that = this;
      /* 	SupplierApi.list().then(res => {
      		that.options.supplierIdOptions = res.data
      		that.options.supplierOptions = res.data
      	}) */
      	CustomerApi.getMyCustInfor().then(response => {
      		that.creditInfor.creditLeft = response.data.creditLeft
      		that.creditInfor.credit = response.data.credit
      		that.creditInfor.frezeCredit = response.data.frezeCredit
      	})
      },
      handleSelectionChange(selection) {
        this.multipleSelection = selection
        this.isSingle = selection.length !== 1
        this.isMultiple = !selection.length
      },
    handleReimportBtnShow: function(status) {
      const validStatusList = ['Y']
      const index = validStatusList.indexOf(status)
      if (index === -1) {
        return false
      } else {
        return true
      }
    },
    handleApAmtBtnShow: function(status) {
      const validStatusList = ['acc_failed']
      const index = validStatusList.indexOf(status)
      if (index === -1) {
        return false
      } else {
        return true
      }
    },
    handleReturnBtnShow: function(status) {
      const validStatusList = ['newRece', 'acc_gen', 'acc_failed']
      const index = validStatusList.indexOf(status)
      if (index === -1) {
        return false
      } else {
        return true
      }
    },
      handleSortChange(sort) {
        if (sort.order) {
          this.queryParams.sortProperty = sort.prop
          this.queryParams.sortDirection = sort.order === 'ascending' ? 'asc' : 'desc'
        } else {
          this.queryParams.sortProperty = null
          this.queryParams.sortDirection = null
        }
        this.handleQuery()
      },
			onSubmit() {
				console.log('submit!');
			}
		}
	}
</script>
<style>
	.flex {
		display: flex;
	}

	.moneyBox {
		display: flex;
		height: 50px;
		width: 100%;
	}

	.moneyChildBox {
		width: 25%;
		height: 50px;
	}

	.textAlLine {
		text-align: center;
	}

	.eduTitle {
		/* margin-top: 30px; */
		color: #818181;
		font-size: 15px;
	}

	.redColor {
		color: #fd0000;
	}

	.titleNumber {
		margin-top: 10px;
		font-weight: bold;
	}

	.tabBox {
		width: 98%;
		/* height: 100px; */
		margin: 0 auto;
		font-size: 25px;
	}

	.el-tabs__nav .el-tabs__item {
		font-size: 18px;
		font-weight: 600;
	}

	::v-deep .el-tabs__nav-scroll {
		width: 50% !important;
		margin: 0 auto !important;
	}

	.demo-form-inline {
		margin-top: 10px;
		height: 70px;
		border-bottom: 1px solid #EEEEEE;
	}
</style>
